<template>
    <div >
        <div class="shop_item"  v-if="shops.length"  v-for="(shop,index) in shops">
            <!--<router-link  :to="'/shop/'+index">--> <!--可以-->
            <!--<router-link :to="{path:'/shop/'+index}">-->
            <router-link :to="{name:'shop',params:{id:index},query:{queryId:index+100} }">
                <!--注意传params时候要name来传，用patch无效-->


                <div class="shop_img">
                    <img :src="baseImageUrl+shop.image_path" alt="图片加载中">
                </div>
                <div class="shop_description">
                    <div class="pinpai">
                        <div class="pinpai_icon">品牌</div>
                        <div class="pinpai_font">{{shop.name}}</div>
                        <ul class="pinpai_right">
                            <li v-for="(item,index) in shop.supports" :key="index">{{item.icon_name}}</li>

                        </ul>
                    </div>
                    <div class="star_section">

                        <Star :score='shop.rating' :size="24"></Star>

                        <div class="rating">{{shop.rating}}</div>
                        <div class="order">月销售{{shop.recent_order_num}}单</div>
                        <div class="delivery_mode">{{shop.delivery_mode.text}}</div>
                    </div>
                    <div class="money">￥{{shop.float_minimum_order_amount}}起送 &nbsp/&nbsp配送费约¥{{shop.float_delivery_fee}}</div>
                </div>
            </router-link>

        </div>
        <ul v-else>
            <li v-for="item in 6">
                <img src="./images/shop_back.svg" alt="back">
            </li>
        </ul>
    </div>
</template>

<script>
    import Star from '../star/star.vue'
    import {mapState} from 'vuex'
    export default {
        name: "ShoopList",
        data(){
            return {
                baseImageUrl:'http://cangdu.org:8000/img/'
            }
        },
        components:{
            Star
        },
        computed:{
            ...mapState(['shops'])
        },
        methods:{
            // routerTo() {
            //     //this.$router.push({name: 'shop', params: {userId: 123}});
            //     //params方式 这里的name值是在定义route.js时中的name
            //     this.$router.push({ path: '/shop', query: { userId: 123 }});    //query方式 
            // }

        }
    }
</script>

<style lang="stylus" scoped>
    @import "../../assets/mixin.styl"
.shop_item
    height:2rem
    background:#fff
    padding:0.2rem 0
    overflow:hidden
    bottom-border-1px(#f0f0f0)
    .shop_img
        float:left
        width:2rem
        height:2rem
        font-size:0.3rem
        //background:#ffff00
        img
            width: 100%
            height:100%
    .shop_description
        height:2rem
        padding-left:2rem
        //background:#cccccc
        font-size:0.3rem
        .pinpai
            height:0.666rem

            .pinpai_icon
                float:left
                background:#ffff00
                height:0.366rem
                line-height:0.366rem
                width:0.8rem
                font-size:0.2rem
                text-align:center
                border-radius:3px
                margin-top:0.15rem
                margin-left:0.1rem
                margin-right:0.1rem
            .pinpai_font
                max-width:150px
                float:left
                font-size:0.3rem
                //background:#9966ff
                line-height:0.666rem
                height:0.666rem
                ellipsis()
            .pinpai_right
                float:right
                //width:1rem
                text-align:center
                height:0.4rem
                line-height:0.4rem
                font-size:0.2rem
                padding-right:0.2rem
                //background:red
                li
                    float:left
                    padding:0 4px
                    color:#999
        .star_section
            height:0.666rem
            line-height:0.666rem
            font-size:0.25rem
            .star
                float:left
            .rating
                float:left
                color:burlywood
                padding-right:0.2rem
            .order
                float:left
            //background:#f966ff
            .delivery_mode//硅谷专送
                border:1px solid #0ff111
                margin-top:0.15rem
                height:0.366rem
                line-height:0.366rem
                float:right
                margin-right:0.2rem
                color:#0ff111
        .money
            height:0.666rem
            font-size:0.25rem
            line-height:0.666rem
            //background:#a71d5d
</style>
